<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<div style="width: 100%">
			<headerOpreate style="float: left" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
			<div style="text-align: right">
				<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
				<el-date-picker :editable="false" v-model="startTime" :clearable="false" size="small" type="date" placeholder="选择起始日期" @change="changeStartTime"></el-date-picker>
				<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
				<el-date-picker :editable="false" v-model="endTime" :clearable="false" size="small" type="date" placeholder="选择结束日期" @change="changeEndTime"></el-date-picker>
			</div>
		</div>
		<div style="width: 100%;padding-top: 2px">
			<span style="font-size: 13px;margin-left: 5px;font-weight: bold">设备种类</span>
			<el-select style="width: 140px" size="small" v-model="deviceType" placeholder="请选择" @change="selectDeviceType">
				<el-option v-for="item in deviceTypeDatas" :key="item.name" :label="item.value" :value="item.name">
				</el-option>
			</el-select>
			<span style="font-size: 13px;margin-left: 5px;font-weight: bold">在线时长排序</span>
			<el-select size="small" v-model="rank" :placeholder="$t('message.selectModeAlert')" style="width: 80px;" @change="selectRank">
				<el-option label="降序" :value="0"></el-option>
				<el-option label="升序" :value="1"></el-option>
			</el-select>
			<div class="block" style="text-align:right;float: right;">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<!-- 智能微图 -->
		<div style="width: 100%" v-show="deviceType === 'WeiTu' || deviceType === 'BookCorner' || deviceType === 'Self_ServiceMachine' || deviceType === 'ZNSJ'">
			<el-table border style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
				<el-table-column :show-overflow-tooltip="true" type="selection" align="center"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="Name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="在线时长(小时)" align="center" prop="olinetime"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="登录次数" align="center" prop="logincount">
					<template slot-scope="scope">
						<a style="color: #50bfff;text-decoration: underline;cursor: pointer" @click="WTLoginDetail(scope.row)">{{scope.row.logincount}}</a>
					</template>
				</el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="借书次数" align="center" prop="borrowcount">
					<template slot-scope="scope">
						<a style="color: #50bfff;text-decoration: underline;cursor: pointer" @click="WTBorrowDetail(scope.row)">{{scope.row.borrowcount}}</a>
					</template>
				</el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="还书次数" align="center" prop="returncount">
					<template slot-scope="scope">
						<a style="color: #50bfff;text-decoration: underline;cursor: pointer" @click="WTReturnDetail(scope.row)">{{scope.row.returncount}}</a>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 智能终端 -->
		<div style="width: 100%" v-show="deviceType === 'MultimediaIT'">
			<el-table border style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
				<el-table-column :show-overflow-tooltip="true" type="selection" align="center"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="Name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="登录次数" align="center" prop="count">
				</el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="最后登录时间" align="center" prop="lasttime">
				</el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="在线时长(小时)" align="center" prop="onlinetime"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="TCUsedDeatil(scope.row)"><i class="el-icon-information el-icon--left"></i>详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- zigbee网关 -->
		<div style="width: 100%" v-show="deviceType === 'WirelessGateway' || deviceType === 'VideoMonitor' || this.deviceType === 'PC'">
			<el-table border style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
				<el-table-column :show-overflow-tooltip="true" type="selection" align="center"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备类型" align="center" prop="model">
				</el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="在线时长(小时)" align="center" prop="hoursed">
				</el-table-column>
			</el-table>
		</div>
		<!-- 安全门 -->
		<div style="width: 100%" v-show="deviceType === 'SafetyGate'">
			<el-table border style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
				<el-table-column :show-overflow-tooltip="true" type="selection" align="center"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="在线时长(小时)" align="center" prop="olinetime"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="进馆人数" align="center" prop="inflow">
				</el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="出馆人数" align="center" prop="outflow">
				</el-table-column>
			</el-table>
		</div>
		<!-- 投影机 -->
		<div style="width: 100%" v-show="deviceType === 'Projector'">
			<el-table border style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
				<el-table-column :show-overflow-tooltip="true" type="selection" align="center"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="所属智能终端" align="center" prop="devicename"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="在线时长(小时)" align="center" prop="hoursed"></el-table-column>
			</el-table>
		</div>
		<div class="block" style="text-align:right;float: right;padding-bottom:2px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun,HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	var date = new Date();
	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				deviceCatetory: '',
				deviceType: '',
				deviceTypeDatas: [],
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				loading: false,
				isReload: false,
				activeName: '0', //默认展示微型图书馆页面
				rank: 0,//排序
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				},
				{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_datareport_alt el-icon--left',
					name: '在线时长对比',
					action: 'goDetail'
				},
				{
					type: 'primary',
					size: 'small',
					icon: "el-icon-eleg-icon_table el-icon--left",
					name: "导出表格",
					action: "exportExcel"
				},
				{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_datareport_alt el-icon--left',
					name: '使用对比',
					action: 'goWTChartDetail'
				},
				]
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			//导出表格
			exportExcel() {　　　　　　
				require.ensure([], () => {　
					if(this.deviceType == 'WeiTu' || this.deviceType == 'BookCorner' || this.deviceType == 'Self_ServiceMachine' || this.deviceType == 'ZNSJ'){
						var header = ['设备名', '设备码', '在线时长(小时)', '登录次数', '借阅次数', '还书次数','备注'];
						var val = ['Name', 'sn', 'olinetime', 'logincount', 'borrowcount', 'returncount'];
					}else if(this.deviceType == 'MultimediaIT'){
						var header = ['设备名', '设备码', '登录次数', '最后登录时间', '在线时长(小时)','备注'];
						var val = ['Name', 'sn', 'count', 'lasttime', 'onlinetime', ''];
					}else if(this.deviceType == 'WirelessGateway' || this.deviceType == 'VideoMonitor' || this.deviceType == 'PC') {
						var header = ['设备名', '设备码', '设备型号', '在线时长(小时)','备注'];
						var val = ['name', 'sn', 'model', 'hoursed' , ''];
					}else if(this.deviceType == 'SafetyGate') {
						var header = ['设备名', '设备码', '在线时长(小时)','进馆人数', '出馆人数', '备注'];
						var val = ['name', 'sn', 'olinetime', 'inflow' , 'outflow', ''];
					}else {
						var header = ['设备名', '所属智能终端', '设备码','在线时长(小时)', '备注'];
						var val = ['name', 'devicename', 'sn' , 'hoursed', ''];
					}　
					const {
						export_json_to_excel
					} = require('../../../../assets/js/vendor/Export2Excel.js');　　　　　　　　
					const tHeader = header;　　　　　　　　
					const filterVal = val;　　　　　　　　
					const list = this.tableData;　　　　　　　　
					const data = this.formatJson(filterVal, list);　
					var beginTime = new Date(this.startTime).format('yyyy-MM-dd');
					var overTime = new Date(this.endTime).format('yyyy-MM-dd');　　　　　　　
					export_json_to_excel(tHeader, data, beginTime + '至' + overTime + this.deviceCatetory + '设备使用情况');　　　　　　
				})　　　
			},
			formatJson(filterVal, jsonData) {　　　　　　
				return jsonData.map(v => filterVal.map(j => v[j]))　　
			},	
			selectDeviceType() {
				if(this.deviceType === 'WeiTu' || this.deviceType === 'Self_ServiceMachine' || this.deviceType === 'BookCorner' || this.deviceType === 'ZNSJ') {
					this.getWT01ADatas();
				} else if(this.deviceType === 'SafetyGate') {
					this.getDoorDatas();
				} else if(this.deviceType === 'WirelessGateway' || this.deviceType === 'VideoMonitor' || this.deviceType === 'PC') {
					this.getZBDatas();
				} else if(this.deviceType === 'MultimediaIT') {
					this.getTCDatas();
				} else if(this.deviceType === 'Projector') {
					this.getProjectorDatas();
				} 
				var vm = this;
				this.deviceTypeDatas.forEach(function(item){
					if(item.name == vm.deviceType){
						vm.deviceCatetory = item.value;
					}
				})
			},
			//保留小数点后两位
			toDecimal(array) {
				for(var i = 0; i < array.length; i++) {
					var f = parseFloat(array[i].hoursed);
					if(isNaN(f)) {
						return;
					}
					f = Math.round(array[i].hoursed * 100) / 100;
					array[i].hoursed = f;
				}
				return array;
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				if(this.deviceType === 'WeiTu' || this.deviceType === 'Self_ServiceMachine' || this.deviceType === 'BookCorner' || this.deviceType === 'ZNSJ') {
					this.getWT01ADatas()
				} else if(this.deviceType === 'SafetyGate') {
					this.getDoorDatas();
				} else if(this.deviceType === 'WirelessGateway' || this.deviceType === 'VideoMonitor' || this.deviceType === 'PC') {
					this.getZBDatas();
				} else if(this.deviceType === 'MultimediaIT') {
					this.getTCDatas();
				} else if(this.deviceType === 'Projector') {
					this.getProjectorDatas();
				} 
			},
			handleSizeChange(val) {
				this.pageSize = val;
				if(this.deviceType === 'WeiTu' || this.deviceType === 'Self_ServiceMachine' || this.deviceType === 'BookCorner' || this.deviceType === 'ZNSJ') {
					this.getWT01ADatas()
				} else if(this.deviceType === 'SafetyGate') {
					this.getDoorDatas();
				} else if(this.deviceType === 'WirelessGateway' || this.deviceType === 'VideoMonitor' || this.deviceType === 'PC') {
					this.getZBDatas();
				} else if(this.deviceType === 'MultimediaIT') {
					this.getTCDatas();
				} else if(this.deviceType === 'Projector') {
					this.getProjectorDatas();
				}
			},
			selectRank() {
				if(this.deviceType === 'WeiTu' || this.deviceType === 'Self_ServiceMachine' || this.deviceType === 'BookCorner' || this.deviceType === 'ZNSJ') {
					this.getWT01ADatas()
				} else if(this.deviceType === 'SafetyGate') {
					this.getDoorDatas();
				} else if(this.deviceType === 'WirelessGateway' || this.deviceType === 'VideoMonitor' || this.deviceType === 'PC') {
					this.getZBDatas();
				} else if(this.deviceType === 'MultimediaIT') {
					this.getTCDatas();
				} else if(this.deviceType === 'Projector') {
					this.getProjectorDatas();
				} 
			},
			formateSelection() {
				var result = [],
				array = this.multipleSelection;
				if(this.deviceType === 'Projector') {
					for(var i = 0; i < array.length; i++) {
						result.push(array[i].keyid);
					}
				} else {
					for(var i = 0; i < array.length; i++) {
						result.push(array[i].sn);
					}
				}
				return result;
			},
			changeStartTime(val) {
				this.startTime = val + ' 00:00:00';
				this.selectDeviceType();
			},
			changeEndTime(val) {
				this.endTime = val + ' 23:59:59';
				this.selectDeviceType();
			},
			WTLoginDetail(row) {
				row.startTime = this.startTime;
				row.endTime = this.endTime;
				row.deviceType = this.deviceType;
				row.rank = this.rank;
				this.$emit('changeView', 'WTLoginDetail', row);
			},
			WTBorrowDetail(row) {
				row.startTime = this.startTime;
				row.endTime = this.endTime;
				row.deviceType = this.deviceType;
				row.rank = this.rank;
				this.$emit('changeView', 'WTBorrowDetail', row);
			},
			WTReturnDetail(row) {
				row.startTime = this.startTime;
				row.endTime = this.endTime;
				row.deviceType = this.deviceType;
				row.rank = this.rank;
				this.$emit('changeView', 'WTReturnDetail', row);
			},
			TCUsedDeatil(row) {
				row.startTime = this.startTime;
				row.endTime = this.endTime;
				row.deviceType = this.deviceType;
				row.rank = this.rank;
				this.$emit('changeView', 'TCDetail', row);
			},
			goWTChartDetail() {
				if(this.deviceType === 'WeiTu' || this.deviceType === 'Self_ServiceMachine' || this.deviceType === 'BookCorner' || this.deviceType === 'ZNSJ') {
					if(this.formateSelection().length === 0){
						this.$notify({
							title: this.$t('message.warning'),
							message: '请选择查看的设备，可多选。',
							type: 'warning',
							duration: 2500
						});
					}else {
						var row = {};
						row.startTime = this.startTime;
						row.endTime = this.endTime;
						row.deviceType = this.deviceType;
						row.rank = this.rank;
						row.sns = this.formateSelection()
						this.$emit('changeView', 'WTChartDetail', row);
					}
				}else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '此功能适用于智能微图/图书角/自助借还机/智能书架设备',
						type: 'warning',
						duration: 2500
					});
				}
			},
			goDetail() {
				if(this.formateSelection().length > 0) {
					if(this.deviceType === 'Projector') {
						this.$emit('changeView', 'Detail', {
							keyid: this.formateSelection(),
							startTime: this.startTime,
							endTime: this.endTime,
							deviceType: this.deviceType,
							rank: this.rank
						})
					} else {
						this.$emit('changeView', 'Detail', {
							sn: this.formateSelection(),
							startTime: this.startTime,
							endTime: this.endTime,
							deviceType: this.deviceType,
							rank: this.rank
						})
					}
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '请选择查看的设备，可多选。',
						type: 'warning',
						duration: 2500
					});
				}
			},
			reloadDatas() {
				this.isReload = true;
				this.selectDeviceType();
			},
			//智能微图/图书角/自助借还机/智能书架统计
			getWT01ADatas() {
				this.loading = true;
				HttpServer.httpPost.call(this, '/Api/Device/DeviceSumaryByModel', {
					index: this.currentPage,
					pagesize: this.pageSize,
					begin: this.startTime,
					end: this.endTime,
					model: [],
					order: this.rank,
					category: [this.deviceType],
					UserId: parseInt(GloabFun.getKeyId()),
				}, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.tableData = response.data.info;
						this.totalSize = response.data.total;
						if(this.isReload) {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
						this.isReload = false;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			//安全门统计
			getDoorDatas() {
				this.loading = true;
				HttpServer.httpPost.call(this, '/Api/SecureGate/SecureGate/Sumary', {
					index: this.currentPage,
					pagesize: this.pageSize,
					begin: this.startTime,
					end: this.endTime,
					order: this.rank,
					category: [this.deviceType],
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.tableData = response.data.info;
						this.totalSize = response.data.total;
						if(this.isReload) {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
						this.isReload = false;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			//多媒体智能终端
			getTCDatas() {
				this.loading = true;
				HttpServer.httpPost.call(this, '/Api/TC1000/TC1000UseSumary', {
					index: this.currentPage,
					pagesize: this.pageSize,
					begin: this.startTime,
					end: this.endTime,
					model: [],
					order: this.rank,
					category: [this.deviceType],
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.tableData = response.data.info;
						this.totalSize = response.data.total;
						if(this.isReload) {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
						this.isReload = false;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			//zigbee网关/视频监控/电脑设备统计
			getZBDatas() {
				this.loading = true;
				HttpServer.httpPost.call(this, '/Api/Bookracks/GetHourUsed', {
					model: [],
					category: [this.deviceType],
					sn: [],
					begin: this.startTime,
					end: this.endTime,
					index: this.currentPage,
					order: this.rank,
					pagesize: this.pageSize,
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.tableData = this.toDecimal(response.data.info);
						this.totalSize = response.data.total;
						if(this.isReload) {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
						this.isReload = false;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			//投影机统计
			getProjectorDatas() {
				this.loading = true;
				HttpServer.httpPost.call(this, '/Api/Projector/GetHourUsed', {
					sn: "",
					begin: this.startTime,
					end: this.endTime,
					index: this.currentPage,
					order: this.rank,
					pagesize: this.pageSize,
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.tableData = this.toDecimal(response.data.info);
						this.totalSize = response.data.total;
						if(this.isReload) {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
						this.isReload = false;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			//获取设备种类列表
			getCacetory() {
				HttpServer.httpGet.call(this, '/Api/Device/GetAllDeviceCategory?fromwhat=1', function(resp) {}, function(resp) {
					resp.data.push({
						name:'Projector',
						value:'投影机/一体机'
					});
					this.deviceTypeDatas = resp.data;
					if(this.templateObj.deviceType && this.templateObj.deviceType != '') {
						let vm = this;
						this.deviceTypeDatas.forEach(function(item) {
							if(item.name === vm.templateObj.deviceType) {
								vm.deviceType = item.name;
								vm.deviceCatetory = item.value;
							}
						})
					} else {
						this.deviceType = this.deviceTypeDatas[0].name;
						this.deviceCatetory = this.deviceTypeDatas[0].value;
					}
				})
			}

		},
		created() {
			this.getCacetory();
			if(this.templateObj.deviceType && this.templateObj.deviceType != '') {
				this.startTime = this.templateObj.startTime;
				this.endTime = this.templateObj.endTime;
				this.rank = this.templateObj.rank;
			}
			this.selectDeviceType();
		}
	}
</script>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>